<template>
  <div class="app" onselectstart="return false;">
    <div class="head" v-if="state.hasHeader">
      <nut-navbar class="navbar" z-index="5" :clickable="false" fixed safe-area-inset-top>
        <template #content>
          <span>{{ t(String(route.meta.title)) }}</span>
        </template>
        <template #left>
          <iconpark-icon @click="router.go(-1)" class="close" icon-id="tongyicontyfanh" size="2.4rem"></iconpark-icon>
        </template>
        <template #right>
          <!-- <van-icon v-if="rightIcon1" @click="onClickRight1" :badge="mailsCount == 0 ? null : mailsCount"
          :name="rightIcon1" /> -->
          <!-- <van-icon @click="onClickRight" :name="state.rightIcon" /> -->
        </template>
      </nut-navbar>
    </div>
    <div class="placeholder" v-if="state.hasHeader"></div>
    <router-view v-slot="{ Component, route }">
      <transition>
        <component :is="Component" :key="route.path" />
      </transition>
    </router-view>

    <nut-tabbar z-index="2" v-if="state.hasTabbar" route v-model="state.active" safe-area-inset-bottom bottom
      placeholder :before-switch="beforeSwitch">
      <nut-tabbar-item class="item" :name="item.name" :to="item.url" v-for="(item, i) in state.tablebarArr" :key="i">{{
        t(item.text)
      }}
        <template #icon="props">
          <span class="tt" v-if="item.isWallet" id="pop_target">
            <SvgaItem :keyStr="i" name="jinbi" :active="state.popoverShow" :loopNumber="1" class="tabbar_icon_1" />
          </span>
          <nut-badge :dot="!!(item.name == 'me' && page.unread)" v-else-if="item.isMe">
            <SvgaItem :keyStr="i" :name="item.name" :active="props.active" :loopNumber="1" class="tab_style" />
          </nut-badge>
          <SvgaItem :keyStr="i" :name="item.name" :active="props.active" :loopNumber="1" class="tab_style" v-else />
        </template>
      </nut-tabbar-item>
    </nut-tabbar>

    <nut-popup v-model:visible="state.popoverShow" position="bottom" safe-area-inset-bottom :overlay="false"
      :pop-class="`${state.popoverShow ? 'pop_class heart' : 'pop_class'}`">

      <div class="popover_bg">

        <div v-for="(v, j) in state.walletList" :key="j" @click="onClickToPage(v.url)">
          <ImgT :src="v.img" :alt="v.text" />
          <span>{{ t(v.text) }}</span>
        </div>
      </div>


    </nut-popup>
    <nut-overlay v-model:visible="isLogin" :close-on-click-overlay="false" :overlay-style="{
      backgroundColor: 'rgba(0, 0, 0, .5)'
    }">
      <div class="login_pop">
        <!-- <Suspense v-if="isLogin"> -->
        <Login v-if="isLogin"></Login>
        <!-- </Suspense> -->

      </div>

    </nut-overlay>
    <ForgotPassword v-if="isForget"></ForgotPassword>
    <!-- 注册弹窗 -->
    <Register v-if="isReg" />
    <!-- 公告弹窗 -->
    <Notice ref="noticeRef" />
  </div>
  <nut-overlay v-model:visible="state.show">
    <div class="overlay_body">
      <SvgaItem keyStr="xz" name="xz" :active="true" style="width: 20vw; height: 20vw;" class="overla_content" />
    </div>

  </nut-overlay>
</template>
<script setup lang="ts">

import { onMounted } from "vue";
import { watch, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import Login from "@/components/Login.vue"
import Register from "@/components/Register.vue"
import ForgotPassword from "@/components/ForgotPassword.vue"
import pinia from '@/store/index';
import { storeToRefs } from 'pinia';
import { User } from '@/store/user';
import { Page } from '@/store/page';
import { MessageEvent2 } from "./net/MessageEvent2";
import { NetMsgType } from "./netBase/NetMsgType";
import { NetEnumDef } from "./netBase/NetEnumDef";
import { Local, needLoginApi } from "@/utils/storage";
import { NetPacket } from "./netBase/NetPacket";
// import { Net } from "@/net/Net";
import H5Websocket from "@/net/Net1";
import { onBeforeMount } from "vue";
import Notice from "@/components/Notice.vue"
import { convertObjectToDateString } from "./utils/publicMethods";
import { useI18n } from 'vue-i18n';
import { showDialog, showNotify } from '@nutui/nutui'
import SvgaItem from "@/components/SvgaItem.vue"

import { getLocale } from "./main"
const { settings } = storeToRefs(Page(pinia));
const { t } = useI18n();
// const Login = defineAsyncComponent(() => import("@/components/Login.vue"))
const userInfo = User(pinia);
const page = Page(pinia);

const { isLogin, isReg, isForget, roleInfo, myEmail } = storeToRefs(userInfo);
const route = useRoute();
const router = useRouter();
const state: any = reactive({
  show: false,
  popoverShow: false,
  active: 'home',
  hasHeader: false,
  hasTabbar: true,
  leftIcon: '',
  rightIcon: '',
  routeName: 'home',
  tablebarArr: [
    { text: 'route_page_home', name: 'home', url: "/", show: false },
    { text: 'route_page_activity', name: 'activity', url: "/activity", show: false },
    { text: 'route_page_transaction', name: '', url: "", isWallet: true, show: false },
    { text: 'route_page_vip', name: 'vip', url: "/vip", show: false },
    { text: 'route_page_me', name: 'me', url: "/me", isMe: true, show: false },
  ],
  walletList: [
    {
      text: 'route_page_wallet',
      img: '/imgs/tabbar/qb.webp',
      url: '/myWallet',
    },
    {
      text: 'route_page_deposit',
      img: '/imgs/tabbar/cz.webp',
      url: '/deposit',
    },
    {
      text: 'route_page_withdrawals',
      img: '/imgs/tabbar/tx.webp',
      url: '/withdrawals',
    }
  ]
})
// const onClickLeft = (name: string) => {

//   router.go(-1);
// };
// const onClickRight = () => {
//   switch (route.name) {
//     default: ;
//       break;
//   }
// };
// const onClickRight1 = () => {
//   router.push('/')
// }



const leftIcon = (name: string) => {
  switch (name) {
    case 'home':
      return "bars";

    default: return "tongyicontyfanh";

  }
}
const rightIcon = (name: string) => {
  switch (name) {
    case 'name':
      return "";
    default: return "service";

  }
};

const onClickToPage = (url: any) => {
  state.popoverShow = false
  router.push(`${url}`)
}
const beforeSwitch = (item: any) => {
  if (!item.name) {
    state.popoverShow = !state.popoverShow
    state.active = ''
    return false
  } else {
    state.popoverShow = false
    state.active = item.name
  }
  return true

}
const init = (name: string) => {
  state.hasHeader = !['home', 'activity', 'me', 'vip', 'trans', 'myWallet', 'undefined', 'openGame', 'gameDetail', 'chatList', 'chatRoom', 'friendsList', 'clubCreate'].includes(String(name))
  state.hasTabbar = !['undefined', 'chatList', 'chatRoom', 'friendsList', 'shortcut', 'openGame'].includes(String(name))

  // state.hasTabbar = ['home', 'activity', 'me', 'vip', 'trans'].includes(String(name))
  state.leftIcon = leftIcon(name)
  state.rightIcon = rightIcon(name)
  state.active = name
}

// 公告消息
const noticeRef = ref()
const onHander_system_notice = async (message: any) => {
  if (message.notice_list?.length) {
    const dialogList: any = message.notice_list.filter((item: any) => item.position == 1)
    const paomaList: any = message.notice_list.filter((item: any) => item.position == 0)

    // 弹窗公告
    let localIds = [] // 本地记录的不再显示
    try {
      localIds = JSON.parse(localStorage.getItem('readed_notice_ids') || '[]')
    } catch {
      localIds = []
    }
    const list: any = dialogList.filter((item: any) => !localIds.includes(item.title)).sort((a: any, b: any) => {
      return b.priority - a.priority
    })
    if (list.length) {
      await getLocale(settings.value)
      await User(pinia).setNoticeList(list)
      User(pinia).setNotice(true)
      noticeRef.value.open()
    }

    // 轮播公告
    paomaList.forEach((item: any) => {
      page.setTextAnnouncementMore(t(item.title) + ' - ' + t(item.content))
    })
  }
}

// setTimeout(() => {
//   onHandler_system_msg({
//     Params: ['noticelist:999'],
//     priority: 99,
//     type: 1
//   })
// }, 5000)

// 消息通知
const onHandler_system_msg = async (m: any) => {
  // console.error('----系统消息', m)
  if (m.code == 903) {
    if (m.Params[0] == 1) { // 弹窗公告
      try {
        const list: any = [{
          content: `system_notice_content_${m.Params[3]}`,
          title: `system_notice_title_${m.Params[2]}`,
          position: 1,
          priority: m.priority,
          type: m.Params[1],
        }]
        await getLocale(settings)
        await User(pinia).setNoticeList(list)
        User(pinia).setNotice(true)
        noticeRef.value.open()
      } catch {
        console.error('error msg', m)
      }
    }
  } else {
    if (m.Params && m.Params.length == 6) { // 跑马灯
      // ***[0]*** 在 [3] 获得 [4] 金币奖励！
      const str = t('home_notice_mixtext', {
        user: `${m.Params[0]?.substr(0, 4)}***`,
        game: m.Params[3] ? t(m.Params[3]) : '',
        money: m.Params[4] ? Number(m.Params[4]).toLocaleString() : 0
      })
      page.setTextAnnouncementMore(str)
    }
  }
}

const onHander_check_version = async (message: any) => {
  if (message.result != NetEnumDef.check_version_result.cvr_yes) {
    console.log("check version failed");
    return;
  }
  needLoginApi()
}
// 我的邮箱
const emailList: any = []
let email_id_list: any = []
const handleEmailInfo = async (rs: any) => {
  if (rs.emails.length > 0) {
    if (!email_id_list.includes(rs.emails[0].email_id)) {
      emailList.push(rs.emails[0])
    }
    if (emailList.length > 0) {
      email_id_list = emailList.map((item: any) => item.email_id)
    }
    const sb = new Set(rs.email_readed);
    emailList.forEach((item: any) => {
      const timer = convertObjectToDateString(item.recv_time)
      item.time = new Date(timer).getTime()
    });


    emailList.sort((a: any, b: any) => b.time - a.time); // 排序
    const list = emailList.filter(
      (item: any) => item.attachments[0].award_value == 0,
    );
    const rewardList = emailList.filter(
      (item: any) => item.attachments[0].award_value > 0,
    );
    const params = {
      email_readed: rs.email_readed,
      list,
      rewardList,
      email_id_list,
      hasNoRead: email_id_list.some((x: any) => !sb.has(x))
    };
    await User(pinia).setEmailList(params);
  }
};

// 监听新收到邮箱
const handleNewEmail = (rs: any) => {
  //奖励邮箱
  if (rs.new_email.attachments[0].award_value > 0) {
    myEmail.value.rewardList.unshift(rs.new_email)
  } else {
    myEmail.value.list.unshift(rs.new_email)
  }
  myEmail.value.hasNoRead = true
}



// 角色详情
const handleRoleInfo = async (data: any) => {

  await User(pinia).getRoleInfo(data)

}
// 角色VIP详情
const handleVipInfo = async (data: any) => {
  await User(pinia).getVIPInfo(data)
}
// 用户详情
const handleUserInfo = async (data: any) => {
  await User(pinia).getInfo(data)
  await User(pinia).setHasLogin(true)
}
// 登录成功后发送邀请码
const handleLoginFinish = async (data: any) => {
  if (data.result == 1) {
    const agent_id = localStorage.getItem('agent_id')
    if (Number(agent_id)) {
      const rq = NetPacket.req_set_invitecode();
      rq.superior_id = Number(agent_id)
      // Net.instance.sendRequest(rq)
      H5Websocket.sendMessageHandler(rq);
    }
  }
}

// 监听金额变化
const handleUpdateMoney = async (data: any) => {
  if (data) {
    const newData = { ...roleInfo.value }
    newData.money = data.cur_money
    await User(pinia).getRoleInfo(newData)
  }
}

// 重复登录
MessageEvent2.addMsgEvent(
  NetMsgType.msgType.msg_notify_repeat_login,
  async () => {
    Local.remove('user')
    await User(pinia).setHasLogin(false)
    showDialog({
      title: t('home_page_offlineNotification'),
      content: t('home_page_offlineContent'),
      okText: t('home_page_offlineConfirm'),
      cancelText: t('home_page_modifyPassword'),
      onOk: async () => {
        location.href = '/'
        await User(pinia).setLogin(true)
      },
      onCancel: async () => {
        location.href = '/'
        await User(pinia).setForget(true)
      },

    })

  }
);
// 充值成功，弹出提示
const handleDepositSuc = async (data: any) => {
  if (data?.amount) {
    showNotify.success(t('deposit_page_depSuccess'));  // 充值成功需要弹出提示
  } else {
    showNotify.danger(t('deposit_page_depSuccess'));
  }
}
const resizeChange = () => {

  if (window.orientation === 90 || window.orientation === -90) {
    state.show = true

  } else {
    state.show = false
  }
}
onBeforeMount(() => {
  let req_check_version_req = NetPacket.req_check_version();
  req_check_version_req.version = 1;
  // Net.instance.sendRequest(req_check_version_req)

  H5Websocket.sendMessageHandler(req_check_version_req);
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_check_version,
    onHander_check_version
  );
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_loading_end,
    async () => {
      await User(pinia).setLoadingEnd(true)
    }
  );


  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_send_system_notice,
    onHander_system_notice
  );
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_sys_msg,
    onHandler_system_msg
  );
  // 用户信息
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_roleinfo_msg,
    handleRoleInfo
  )
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_user_info,
    handleUserInfo
  );

  // 回执监听
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_email_list,
    handleEmailInfo,
  );
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_vip_info,
    handleVipInfo
  );
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_money_update2,
    handleUpdateMoney
  );
  // 充值成功
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_recharge_success_from_third,
    handleDepositSuc
  );
  // 监听新邮件
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_new_email,
    handleNewEmail
  );
  // 登录完成
  MessageEvent2.addMsgEvent(
    10086,
    handleLoginFinish,
  );
})
onMounted(async () => {
  init(String(route.name))


  Local.set('agentid', route.query.uid || '0')

})
watch(
  () => route.name,
  (n: any) => {
    init(String(n))

    if (n != 'openGame') {
      let event = "onorientationchange" in window ? "orientationchange" : "resize"
      window.addEventListener(event, resizeChange, false)
    }
  }
)
</script>
<style lang='scss' scoped>
.app {
  min-height: 100vh;
  user-select: none !important;
  background-image: radial-gradient(circle at 50% 11%, #361e79, #202137 97%);
  display: flex;
  flex-direction: column;

  .head {
    position: fixed;
    width: 100%;
    height: 55px;
    background-color: #361e79;
    z-index: 1;
  }



  .placeholder {
    height: 55px;
  }

  :deep(.nut-tabbar) {
    border: none;
    align-items: end;
    background-color: #361e79;
    box-shadow: 0 -3px 15px #000;
  }

  .tt {
    display: inline-block;
    z-index: 1;
    width: 80px;
    // height: 70px;
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);

    &::before {
      content: "";
      width: 70px;
      height: 35px;
      border-radius: 40px 40px 0 0;
      background-color: #361e79;
      position: absolute;
      top: -5px;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 -8px 10px #000;
      z-index: -1;
    }
  }

}

.login_pop {
  display: flex;
  width: 355px;
  height: 100%;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}



.nut-tabbar-item__icon--unactive {
  color: #8e82c2 !important;
}

.nut-tabbar-item {
  color: #fff;
  margin-bottom: 7px;
  align-items: end;
  /* background-color: #301a73; */
}

.item {
  height: 5vh;
}

:deep(.nut-popover .nut-popover-content) {
  opacity: none;
}

.tab_style {
  width: 32px;
}

.popover_bg {
  width: 100%;
  height: 95.4px;
  background: url(/imgs/tabbar/tabPopBg.webp) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-around;

  >div {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    color: #8e82c2;
    align-items: center;

    >img {
      width: 38px;
      height: 38px;
    }
  }
}
</style>
